<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆工作台</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user.center.css')}" type="text/css">
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="${resource(dir: 'jquery-ui/', file: 'jquery-ui.css')}" type="text/css"></link>
	    <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
        <style type="text/css">
        input, textarea, select {

		    width: 230px;
		}
		div .table .img{
			width: 210px;
			min-height: 120px;
			background-size: cover;
			background-repeat: no-repeat;
		}
		div .form-col{
			padding: 10px 0 10px 0;
		}
		
        </style>
    </head>
<body>
<script>

		// 编辑框变量
		var editDialog,dialog,
		etitle = $( "#etitle" ),
		title = $("#title"),
	    edescription = $( "#edescription" ),
	    description = $('#description'),
	    link = $('#url'),
		elink = $('#eurl'),
		postimg = $('#postimg'),
		epostimg=$('#epostimg');

	    eallFields = $([]).add( etitle ).add( edescription ).add( elink);
	    allFields = $([]).add(title).add(description).add(link);
			$(function() {
			  
			    tips = $( ".validateTips" );
			  	//$( "#selectmenu" ).selectmenu();
			  
			  //切换对话框提示
			  function updateTips( t ) {
			    tips
			      .text( t )
			      .addClass( "ui-state-highlight" );
			    setTimeout(function() {
			      tips.removeClass( "ui-state-highlight", 1500 );
			    }, 500 );
			  }

			  //校验函数
			  function checkLength( o, n, min, max ) {
				  //console.log(o)
			    if ( o.val().length > max || o.val().length < min ) {
			      o.addClass( "ui-state-error" );
			      updateTips( "Length of " + n + " must be between " +
			        min + " and " + max + "." );
			      return false;
			    } else {
			      return true;
			    }
			  }

			  //校验函数
			  function checkRegexp( o, regexp, n ) {
			    if ( !( regexp.test( o.val() ) ) ) {
			      o.addClass( "ui-state-error" );
			      updateTips( n );
			      return false;
			    } else {
			      return true;
			    }
			  }

			// 添加分类
			  function addCate() {
			    var valid = true;
			    allFields.removeClass( "ui-state-error" );
				
				var titleValue = $('#title').val();
				var descriptionValue = $('#description').val();
				var linkValue = $('#url').val();
				var imgValue = $('#postimg').val();
			    //valid = valid && checkLength( name, "name", 3, 16 );
			    //valid = valid && checkLength( channel, "channel", 6, 80 );
			
			    //valid = valid && checkRegexp( name, /^\s*$/, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
			   // valid = valid && checkRegexp( channel, /^[a-z]([0-9a-z_\s])+$/i, "eg. ui@jquery.com" );
				
				
			    if ( valid ) {

				  console.log($('#title').attr('name')+" "+$('#description').val() +" "+ imgValue)
			      //push to server
			      
			      $.ajax({  
						type:'POST',  
						data:{"title":titleValue,
							  "description":descriptionValue,
							  "img":imgValue,
							  "url":linkValue},
						dataType:'text',
						async: false,
						contentType: "application/x-www-form-urlencoded; charset=utf-8",
						url:'/scfire/manage/saveBannerPC',  		           
						beforeSend:function(){console.log('loading...');},  
						success:function(data){
							 // add html
							 dialog.dialog( "close" );
							 //刷新
							 window.location.href='/scfire/manage/listBannerPc'
						     
						  },  
						complete:function(){console.log('mission complete.')} ,
						error:function(data){
							updateTips( "保存出错！" );
						      }
						});
					
			    return valid;
			   }
		     }
			
			  dialog = $( "#dialog-form" ).dialog({
			    autoOpen: false,
			    height: 450,
			    width: 400,
			    modal: true,
			    buttons: {
			      "新建": addCate,
			      "取消": function() {
			        dialog.dialog( "close" );
			      }
			    },
			    close: function() {
			      //form[ 0 ].reset();
			      $("#imgshow").css('background-image', 'url()');
			      allFields.removeClass( "ui-state-error" );
			    }
			  });
			  //编辑
			  
			function editCate() {
				var id = $("#postid").val();
				var titleValue = $('#etitle').val();
				var descriptionValue = $('#edescription').val();
				var linkValue = $('#eurl').val();
				var imgValue = $('#epostimg').val();

				var valid = true;
				if (valid) {

				//push to server
				$.ajax({
						type : 'POST',
						data : {
							"id" : id,
							"title":titleValue,
							 "description":descriptionValue,
							 "img":imgValue,
							 "url":linkValue
						},
						dataType : 'text',
						async : false,
						contentType : "application/x-www-form-urlencoded; charset=utf-8",
						url : '/scfire/manage/saveBannerPC',
						beforeSend : function() {
							console.log('loading...');
						},
						success : function(data) {
							// add html

							editDialog.dialog("close");
							//刷新页面
							window.location.href = '/scfire/manage/listBannerPc'
						},
						complete : function() {
							console.log('mission complete.')
						},
						error : function(data) {
							updateTips("保存出错！");
						}
					});
			return valid;
			}
		}
		editDialog = $("#edit-form").dialog({
			autoOpen : false,
			height : 450,
			width : 400,
			modal : true,
			buttons : {
				"保存" : editCate,
				"取消" : function() {
					editDialog.dialog("close");
				}
			},
			close : function() {
				//eallFields[ 0 ].reset();
				eallFields.removeClass("ui-state-error");
			}
		});

		//editDialog.dialog('open');
		//

	});


	function add(){
		//clean all fields;
		$('#title').val('');
		$('#description').val('');
		$('#url').val('');
		$('#postimg').val('');
		//open dialog;
		dialog.dialog('open');
	}
	function edit(id, title, url, img) {
		var description = $("#despCtx"+id).val();
		console.log(id+title+description+url+img);
		$("#postid").val(id);
		
		$("#edescription").val(description);
		$("#etitle").val(title);
		$("#eurl").val(url);
		$("#epostimg").val(img);
		$("#eimgshow").css('background-image', "url(/scfire/project/imgRead?img="+img+")");
		editDialog.dialog('open');
	}
</script>

	<div class="container-fluid">

		<section class="quick-navi mb20">
			<div class="container">
				<a href="#" class="quick-link"><span>火堆工作台</span><span
					class="caret"></span></a>
				<!--a href="#" class="quick-link">联系我们</a-->
			</div>
		</section>

		<section>
			<div class="container mb50">
				
				<g:render template="navigate"   model="[status: status]"/>
							

				<div class="right-content" id="rightconsole">
				<%-- 编辑分类弹出框--%>
				<div id="edit-form" title="编辑">
					<p class="validateTips"></p>
					
					<form>
					  <fieldset>
					  	<input type="hidden" id="postid">
					    <div class="form-col">
					    <label for="name">标题</label>
					    <input type="text" name="title" id="etitle" value="" class="text ui-widget-content ui-corner-all">
					    </div>
					    <div class="form-col">
					    <label for="name">描述</label>
					    <textarea  name="description" id="edescription" value="" class="text ui-widget-content ui-corner-all"></textarea>
					    </div>
					    <div class="form-col">
					    <label for="name">链接</label>
					    <input type="text" name="url" id="eurl" value="" class="text ui-widget-content ui-corner-all">
					    </div>
					    <div class="form-col">
					    <label for="channel">图片</label>
					    <input type="file" id="eimg" name="eimg"/>
					    <input type="hidden" name="postimg" id="epostimg">
					    </div>
					    <div class="form-col">
					    <label for="channel">预览</label>
					    <div id="eimgshow" class="img" style="background-image:url()"></div>
					    </div>
					
					    </fieldset>
					  </form>
				</div>
				
				<%-- 新建弹出框--%>
				<div id="dialog-form" title="新建">
					<p class="validateTips"></p>
					
					<form>
					  <fieldset>
					    <div class="form-col">
					    <label for="name">标题</label>
					    <input type="text" name="title" id="title" value="" class="text ui-widget-content ui-corner-all">
					    </div>
					    <div class="form-col">
					    <label for="name">描述</label>
					    <textarea  name="description" id="description" value="" class="text ui-widget-content ui-corner-all"></textarea>
					    </div>
					    <div class="form-col">
					    <label for="name">链接</label>
					    <input type="text" name="url" id="url" value="" class="text ui-widget-content ui-corner-all">
					    </div>
					    <div class="form-col">
					    <label for="channel">图片</label>
					    <input type="file" id="img" name="img"/>
					    <input type="hidden" name="postimg" id="postimg">
					    </div>
					    <div class="form-col">
					    <label for="channel">预览</label>
					    <div id="imgshow" class="img" style="background-image:url()"></div>
					    </div>
					
					    </fieldset>
					  </form>
				</div>
				
				<h1>PC海报管理</h1>
				<button onclick="add()">添加海报</button>
				<table class="table table-bordered">
						<tr>
							<td>标题</td>
							<td>描述</td>
							<td>链接</td>
							<td>海报</td>
							<td>操作</td>
						<tr>
						<g:if test="${posterPcs != null}">
						<g:each in="${posterPcs}" var="post">
						<tr>
							<td>${post.title}</td>
							<td style="white-space: pre-line;">${post.description}</td>
							<td>${post.url}</td>
							<td><div class="img" style="background-image:url('/scfire/project/imgRead?img=${post.img}')"></div></td>
							<td><a href="#"; onclick="edit('${post.id}','${post.title}','${post.url}','${post.img}')">编辑</a> |  <a href="/scfire/manage/deleteBannerPc?bannerid=${post.id}">删除</a>
							<input type="hidden" value="${post.description}" id="despCtx${post.id}">
							</td>
						<tr>
						</g:each>
						</g:if>
				</table>


					<div class="pagea">
		               <span>共${totalCount ?: 0}条记录</span>
		               <div class="page float_r" style="margin: 10px;padding: 10px;border:5px;"><%--
					   <g:paginate controller="manage" action="projectApproveStatus" params='[status:"${status}"]' total="${totalCount ?: 0}"/>
					   --%></div>
		          	</div>                            
            	</div>
                	
                	
			</div>
			<div class="clearboth"></div>
		</section>


	</div>

	<script type="text/javascript">

		$(function() {
			$('ul.nav.navbar-nav li').hover(
					function() {
						console.log($(this).index());
						$(this).siblings('.top-active').addClass(
								'position-' + $(this).index());
					},
					function() {
						$(this).siblings('.top-active').removeClass(
								'position-' + $(this).index());
			});

			 $('.form-col').on('change', 'input[type=file]', function(){
		         //the url is for test ....
		         var obj = $(this);
		         var file = obj.attr('id');
		         var editFlag = false;
		         console.log("request:"+file);
		         if(file == 'eimg'){
		        	 editFlag = true;
			     }
		          $.ajaxFileUpload({  
		     			url:'/scfire/project/imgSaveMb',  
		     			secureuri:false,  
		     			dataType:'text',
		     			fileElementId:file,//file标签的id 
		     			success: function (data, status) { 
					           	if(data=='large'){
					           		showWarn('图片过大');
					           		return;
					           	}
					       		if(data=='format'){
					           		showWarn('图片格式不对');
					           		return;
					           	}
				               //把图片替换  
				               if(data=='fail'){
				               		showWarn('上传失败');
				               }else{
				            	   //图片预览
				            	   
				            	   console.log("return:"+data);
				                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
				                   //图片地址赋值给后台
				                   //$("#img").val(data);
				                   console.log("url:"+imageurl);
				                   if(editFlag){
				                	   console.log("in edit model..");
					                   $('#epostimg').val(data);
				                	   $("#eimgshow").css('background-image', 'url(' + imageurl + ')');
					               }
				                   else{
				                	   console.log("in create model..");
				                	   $('#postimg').val(data);
				                	   $("#imgshow").css('background-image', 'url(' + imageurl + ')');
					               }
		             
				               }
				           },  
				           error: function (data, status, e) {  
				           },
				          
		     	});
		     });
		});

		function deleteItem(item) {
			$("#").remove();
		}
		
	</script>

</body>
</html>